<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单管理页</title>
    <link rel="stylesheet" th:href="@{/assets/css/styles.css}">
    <link rel="stylesheet" th:href="@{/assets/css/colors.css}">
    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <script th:src="@{/assets/js/popper.min.js}"></script>
    <script th:src="@{/assets/js/bootstrap.min.js}"></script>
    <script th:src="@{/assets/js/custom.js}"></script>
    <script th:src="@{/assets/js/daterangepicker.js}"></script>
    <script th:src="@{/assets/js/dropzone.js}"></script>
    <script th:src="@{/assets/js/imagesloaded.js}"></script>
    <script th:src="@{/assets/js/ion.rangeSlider.min.js}"></script>
    <script th:src="@{/assets/js/jquery.magnific-popup.min.js}"></script>
    <script th:src="@{/assets/js/lightbox.js}"></script>
    <script th:src="@{/assets/js/markerclusterer.js}"></script>
    <script th:src="@{/assets/js/moment.min.js}"></script>
    <script th:src="@{/assets/js/morris.min.js}"></script>
    <script th:src="@{/assets/js/raphael.min.js}"></script>
    <script th:src="@{/assets/js/select2.min.js}"></script>
    <script th:src="@{/assets/js/slick.js}"></script>
    <script th:src="@{/assets/js/slider-bg.js}"></script>
    <script th:src="@{/assets/js/script.js}"></script>
</head>
<body>
    <!-- 复用首页头部 -->
    <header th:replace="index::header"></header>
    <!-- 提示框信息 -->
    <div th:replace="point-modal::modal"></div>
    <!-- 当前用户发布的所有房源信息 -->
    <div class="container" style="margin-bottom: -20px; height: 695px; overflow: auto">
        <section class="p-0">
            <div class="container-fluid p-0">
                <div class="row">
                    <!-- 左侧导航栏 -->
                    <div th:replace="sidebar::left"></div>
                    <!-- 右侧内容 -->
                    <div class="col-lg-9 col-md-8 col-sm-12"  style="height:695px;overflow:auto;">
                        <div class="dashboard-body">
                            <table class="property-table-wrap responsive-table bkmark" style="margin-top: -10px;margin-bottom: -30px;">
                                <tbody>
                                    <tr>
                                        <th style="width: 390px;"><i class="fa fa-file-text"></i>订单列表</th>
                                        <th>详情</th>
                                        <th th:if="${loginUserData.role != 'customer'}">租客</th>
                                        <th th:if="${loginUserData.role != 'owner'}">房东</th>
                                        <th>操作</th>
                                    </tr>
                                </tbody>
                                <!-- 循环显示订单信息 -->
                                <tr th:each="order:${orders}" th:if="${orders != null}">
                                    <!-- 订单、房子相关信息 -->
                                    <td class="dashboard_propert_wrapper">
                                        <img th:src="@{|/assets/img/house/${order.house.thumbnailUrl}|}">
                                        <div class="title">
                                            <h4><a th:href="@{|/houseDetail/${order.house.id}|}" target="_blank" th:text="${order.house.title}">房子标题</a></h4>
                                            <span th:text="${order.house.address}">房子地址信息</span>
                                        </div>
                                    </td>
                                    <td style="font-size: 12px;">
                                        <div class="table-property-price">
                                               <div th:text="${'开始：' + #calendars.format(order.startDate, 'yyyy-MM-dd')}"></div>
                                               <div th:text="${'到期：' + #calendars.format(order.endDate, 'yyyy-MM-dd')}"></div>
                                        </div>
                                        <span></span>
                                        <div class="table-property-price">
                                                <span th:text="${'总金额：￥' + order.totalAmount}">总价格</span>
                                        </div>
                                        <!-- 订单状态 使用switch选择 -3-租客已取消；-2-待签合同；-1-待付款；0-生效中；1-已到期；2-已退租；3-租客申请退租；4-退租申请不通过； -->
                                        <div th:switch="${order.status}">
                                                <span class="text-warning" th:if="${order.status == -3}">租客已取消</span>
                                                <span class="text-warning" th:if="${order.status == -2}">待签合同</span>
                                                <span class="text-warning" th:if="${order.status == -1}">待付款</span>
                                                <span class="text-warning" th:if="${order.status == 0 || order.status == 4}">生效中</span>
                                                <span class="text-warning" th:if="${order.status == 1}">已到期</span>
                                                <span class="text-warning" th:if="${order.status == 2}">已退租</span>
                                                <span class="text-warning" th:if="${order.status == 3}">用户申请退租</span>
                                        </div>
                                    </td>
                                    <!-- 租客相关信息 -->
                                    <td th:if="${loginUserData.role != 'customer'}">
                                        <div th:text="${order.customerUser.userDisplayNa}">租客真实姓名</div>
                                        <span class="table-property-price">
                                            <div style="font-size: 8px;" th:text="${order.customerUser.phone}">租客电话</div>
                                            <div style="font-size: 8px;" th:text="${order.customerUser.email}">租客邮箱</div>
                                        </span>
                                    </td>
                                    <!-- 房东信息 -->
                                    <td th:if="${loginUserData.role != 'owner'}">
                                        <div th:text="${order.OwnerUser.userDisplayNa}">房东真实姓名</div>
                                        <span class="table-property-price">
                                             <div style="font-size: 8px;" th:text="${order.OwnerUser.phone}">房东电话</div>
                                             <div style="font-size: 8px;" th:text="${order.OwnerUser.email}">房东邮箱</div>
                                        </span>
                                    </td>
                                    <!-- 操作 -->
                                    <td>
                                        <div style="border: 1px solid #c6afaf; border-radius: 5px; margin-bottom: 1px">
                                            <a th:href="@{/order/orderInfo(orderId = ${order.id})}" target="_blank">查看合同</a>
                                        </div>
                                        <div style="border: 1px solid #c6afaf; border-radius: 5px; margin-bottom: 1px"  th:if="${order.customerUserId == loginUserData.id && (order.status == -2 || order.status == -1)}">
                                            <a href="#" th:onclick="|cancelOrder(${order.id})|">取消订单</a>
                                        </div>
                                        <!-- -3-租客已取消；-2-待签合同；-1-待付款；0-生效中；1-已到期；2-已退租；3-租客申请退租；4-退租申请不通过； -->
                                        <div style="border: 1px solid #c6afaf; border-radius: 5px; margin-bottom: 1px" th:if="${(order.status == 0 || order.status == 4) && order.customerUserId == loginUserData.id}">
                                            <a href="#" th:onclick="|applyDrawback(${order.id})|">申请退租</a>
                                        </div>
                                        <div style="border: 1px solid #c6afaf; border-radius: 5px; margin-bottom: 1px" th:if="${order.status == 3 && order.ownerUserId == loginUserData.id}">
                                            <a href="#" th:onclick="|drawback(${order.id})|">同意退租</a>
                                        </div>
                                        <div style="border: 1px solid #c6afaf; border-radius: 5px; margin-bottom: 1px" th:if="${order.status == 3 && order.ownerUserId == loginUserData.id}">
                                            <a href="#" th:onclick="|drawbackFail(${order.id})|">驳回退租</a>
                                        </div>
                                        <div style="border: 1px solid #c6afaf; border-radius: 5px; margin-bottom: 1px" th:if="${order.status == 0 && order.customerUserId == loginUserData.id}">
                                            <a th:href="@{/feedback/feedbackPage(orderId = ${order.id})}">提交反馈</a>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                            <!-- 分页 -->
                            <nav class="mt-5" th:if="${page.rows>0}" th:replace="index::pagination"></nav>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- 复用首页底部 -->
    <div th:replace="index::footer"></div>

    <script>
        $(function () {
            $("#orderManage").attr("class", "active");
        })
    </script>
</body>
</html>